<template>
	<view class="" :style="{ '--color': vuex_config.themeColor1 }">
		<view class="sww-sidebar-box" :style="[
				{
					bottom: bottom + 'rpx',
					right: right + 'rpx',
					zIndex: zIndex
				},
				customStyle
			]" v-if="sidebarBox">
			<button class="sww-sidebar-item u-reset-button" v-if="opacity == 1" :style="{
					zIndex: uZIndex
				}" @click="$backToTop">
				<u-icon name="e69e" size="40" custom-prefix="iconfont"></u-icon>
			</button>
			<button v-if="share" class="sww-sidebar-item u-reset-button" @click="$showSelectBox">
				<u-icon name="e6eb" size="40" custom-prefix="iconfont"></u-icon>
			</button>
			<button v-if="contact" class="sww-sidebar-item u-reset-button" open-type="contact" @click="$customer">
				<u-icon name="e741" size="40" custom-prefix="iconfont"></u-icon>
			</button>
		</view>
		<u-popup v-model="shareBoxVisible" @close="closePopup" mode="bottom" z-index="99999" safe-area-inset-bottom border-radius="16">
			<view class="share-select-box">
				<view class="share-select-list">
					<button class="share-select-item u-reset-button" open-type="share" @click="$share">
						<u-icon name="weixin-fill" class="share-select-icon"></u-icon>
						<view class="share-select-text">微信好友</view>
					</button>
					<button class="share-select-item u-reset-button" @click="$createPoster" v-if="sidebarBox">
						<u-icon name="moments" class="share-select-icon"></u-icon>
						<view class="share-select-text">生成海报</view>
					</button>
				</view>
				<view class="share-select-cancel" @click="shareBoxVisible = false">取消</view>
			</view>
		</u-popup>
		<u-mask :show="posterVisible" z-index="99999" :zoom="false" @click="$closePopup" :custom-style="posterStyle">
			<canvas style="width: 375px; position: absolute; left: 750rpx; height: 224px;  opacity: 0;"
				canvas-id="codecanvas" />
			<view class="post_main">
				<view class="poster-box" @click.stop.prevent v-if="posterUrl">
					<image class="poster-img" :src="posterUrl" mode="widthFix" show-menu-by-longpress></image>
					<view class="poster-text">长按保存图片到手机相册</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import UMask from '../../../uview-ui/components/u-mask/u-mask';
	import {
		uniGetImageInfo,uniCall
	} from '@/utils/uniPromise';
	export default {
		components: {
			UMask
		},
		props: {
			value:{
				type: Boolean,
				default: false
			},
			// 返回顶部滚动时间
			duration: {
				type: [Number, String],
				default: 100
			},
			// 是否显示盒子
			sidebarBox: {
				type: Boolean,
				default: true
			},
			// 滚动距离
			scrollTop: {
				type: [Number, String],
				default: 0
			},
			// 距离顶部多少距离显示，单位rpx
			top: {
				type: [Number, String],
				default: 400
			},
			zIndex: {
				// 图标外层优先级
				type: [Number, String],
				default: 9
			},
			right: {
				// 距离右侧距离，单位rpx
				type: [String, Number],
				default: 24
			},
			bottom: {
				// 距离底部距离，单位rpx
				type: [String, Number],
				default: 200
			},
			// 整个组件的样式
			customStyle: {
				type: Object,
				default () {
					return {};
				}
			},
			// 是否显示分享按钮
			share: {
				type: Boolean,
				default: false
			},
			// 是否显示客服按钮
			contact: {
				type: Boolean,
				default: false
			},
			// 产品信息，需要分享海报功能时传入此参数
			prodInfo: {
				type: Object
			}
		},
		watch:{
			value: {
				handler(val) {
					if(val){
						this.$showSelectBox()
					}
				},
				deep: true
			}
		},
		data() {
			return {
				shareBoxVisible: false,
				posterVisible: false,
				posterUrl: '',
				code: '',
				posterStyle: {
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center'
				}
			}
		},
		methods: {
			$backToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: this.duration
				});
			},
			$showSelectBox() {
				this.shareBoxVisible = true;
			},
			$closePopup() {
				this.shareBoxVisible = false;
				this.posterVisible = false;
				this.$emit('input', false);
			},
			closePopup(){
				this.$emit('input', false);
			},
			$share() {
				this.$closePopup();
				// #ifdef H5
				this.shareBoxVisible = true;
				// #endif
			},
			$createPoster() {
				this.posterVisible = true;
				this.shareBoxVisible = false;
				let path = `/package/business-card/share-card/index?id=${this.vuex_user.card_id}`;

				this.$resPost('SmallProgramQRCode', {
					url: path,
					type: 99,
					appid: this.vuex_business.appid,
				}).then(({
					data
				}) => {
					let posterUrl = `${this.vuex_businessObj.resquest}${data.url}`;
					uniGetImageInfo(posterUrl).then(res => {
						this.code = res;
						this.draw()
					});
				})
				
			},
			draw() {
				let that = this;
				let leftheight = 0
				const ctx = uni.createCanvasContext('codecanvas', this);
				ctx.drawImage('../static/bgc.png', 0, 0, 375, 400)
				ctx.setFontSize(16)
				ctx.setFillStyle('#333')
				leftheight += 34
				ctx.fillText(this.prodInfo.company, 32, leftheight)
				leftheight += 36
				let rightheight = leftheight
				ctx.setFontSize(18)
				ctx.setFillStyle('#f4a223')
				ctx.fillText(this.prodInfo.name, 32, leftheight)
				let x = ctx.measureText(this.prodInfo.name).width;
				ctx.setStrokeStyle('#f4a223')
				ctx.setFontSize(12)
				ctx.fillText(this.prodInfo.duties, x + 54, leftheight - 1)
				let x1 = ctx.measureText(this.prodInfo.duties).width;
				ctx.arc(x + 54, leftheight - 6, 10, 0.5 * Math.PI, 1.5 * Math.PI)
				ctx.arc(x + x1 + 54, leftheight - 6, 10, 1.5 * Math.PI, 0.5 * Math.PI)
				ctx.moveTo(x + 54, leftheight + 4)
				ctx.lineTo(x + x1 + 54, leftheight + 4)
				ctx.stroke()
				let height = (72 * this.code.height) / this.code.width;
				ctx.drawImage(this.code.path, 271, rightheight, 72, height)
				rightheight = height + 24 + rightheight
				ctx.setStrokeStyle('#333')
				ctx.fillText('【长按获取名片】', 260, rightheight)
				leftheight += 34
				ctx.setFontSize(10)
				ctx.drawImage('../static/c_2.png', 32, leftheight - 10, 12, 12)
				ctx.setFillStyle('#999')
				ctx.fillText('电话:', 50, leftheight)
				ctx.fillText(this.prodInfo.phone, 80, leftheight)
				leftheight += 22
				ctx.drawImage('../static/c_3.png', 32, leftheight - 10, 14, 12)
				ctx.setFillStyle('#999')
				ctx.fillText('邮箱:', 50, leftheight)
				ctx.fillText(this.prodInfo.email, 80, leftheight)
				leftheight += 22
				ctx.drawImage('../static/c_1.png', 32, leftheight - 10, 12, 12)
				ctx.setFillStyle('#999')
				ctx.fillText('地址:', 50, leftheight)
				this.drawText(ctx, this.prodInfo.address, 80, leftheight, 30, 120)
				ctx.save()
				leftheight += 60
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
							quality: 1,
							height: leftheight,
							canvasId: 'codecanvas',
							success: function(res) {
								// 在H5平台下，tempFilePath 为 base64
								// console.log(res.tempFilePath)
								that.posterUrl = res.tempFilePath;
							},
							fail: err => {}
						},
						this)
				})
			},
			// *
			//  * 绘制多行文本
			//  * @param ctx canvas对象
			//  * @param str 文本
			//  * @param leftWidth 距离左侧的距离
			//  * @param initHeight 距离顶部的距离
			//  * @param titleHeight 文本的高度
			//  * @param canvasWidth 文本的宽度
			//  * @returns {*}

			drawText(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
				let lineWidth = 0;
				let lastSubStrIndex = 0; //每次开始截取的字符串的索引
				for (let i = 0; i < str.length; i++) {
					lineWidth += ctx.measureText(str[i]).width;
					if (lineWidth > canvasWidth) {
						ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
						initHeight += 16; //22为 文字大小20 + 2
						lineWidth = 0;
						lastSubStrIndex = i;
						titleHeight += 22;
					}
					if (i == str.length - 1) { //绘制剩余部分
						ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
					}
				}
				// 标题border-bottom 线距顶部距离
				titleHeight = titleHeight + 10;
				return titleHeight;

			},
			// 客服
			$customer() {
				// #ifdef H5
				let phone = this.vuex_business.custom_tel;
				uniCall(phone);
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sww-sidebar-box {
		width: 80rpx;
		min-height: 70rpx;
		position: fixed;
		opacity: 0.7;

		.sww-sidebar-item {
			width: 100%;
			height: 80rpx;
			color: #ffffff;
			background-color: var(--color);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: opacity 0.3s;
			border-radius: 50%;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.share-select-box {
		width: 100%;

		.share-select-list {
			width: 100%;
			display: flex;

			.share-select-item {
				flex: 1;
				height: 300rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.share-select-icon {
					width: 90rpx;
					height: 90rpx;
					color: #fff;
					background-color: #07c160;
					border-radius: 50%;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 50rpx;
				}

				&:last-child {
					.share-select-icon {
						background-color: #1989fa;
					}
				}
			}
		}

		.share-select-cancel {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-top: 1rpx solid #cccccc;
			box-sizing: content-box;
		}
	}

	.post_main {
		height: 100%;
		padding: 40rpx 0;
		display: flex;
		align-items: center;

		.poster-box {
			width: 600rpx;
			max-height: 100%;
			overflow-y: auto;
			// display: flex;
			// flex-direction: column;
			// justify-content: center;
			// align-items: center;
			border-radius: 12rpx;
			margin: auto;
			background-color: #fff;

			.poster-img {
				width: 100%;
				border-radius: 12rpx;
			}

			.poster-text {
				font-size: 28rpx;
				color: #333;
				line-height: 100rpx;
				text-align: center;
			}
		}
	}
</style>
